<template>
  <div class="departments" v-loading="loading">
    <!-- 1.卡片 -->
    <el-card class="box-card">
      <!-- 分割线 -->
      <tree-tools
        @addDep="doAdd"
        :treeNode="company"
        :isRoot="true"
      ></tree-tools>
      <el-divider></el-divider>
      <!-- 树形控件 -->
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <!--  -->
        <tree-tools
          slot-scope="{ data }"
          :treeNode="data"
          @addDep="doAdd"
          @delpet="getDepLists"
          @editDept="doEdit"
        ></tree-tools>
      </el-tree>
    </el-card>
    <!-- 2.弹出框：添加子部门 -->
    <!-- 把子部门的id传给pid，再传给add组件 -->
    <addDepts
      :pid="currentId"
      :showDialog.sync="showDialog"
      @tongzhi="getDepLists"
      ref="addDept"
    />
  </div>
</template>

<script>
// 导入子组件
import treeTools from './components/tree-tools.vue'
import addDepts from './components/add-depts.vue'
import { getDepartments, getEachDept } from '@/api/departments'
// 导入工具函数之转换成树状
// getDepLists
import { getDepData } from '@/utils'

export default {
  name: 'depts',

  components: { treeTools, addDepts },
  data () {
    return {
      // 页面加载动画
      loading: false,
      // 显示添加子部分的弹出框：
      showDialog: false,
      currentId: '',
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      // 绑定tree的默认显示文字和子节点
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      data: [
        {
          id: 1,
          manager: '孙彩',
          name: '总裁办',
          children: [
            {
              id: 11,
              name: '教学办',
              manager: '张三'
            }
          ]
        },
        {
          id: 2,
          name: '行政部',
          manager: '罗通'
        },
        {
          id: 3,
          name: '人事部',
          manager: '李四'
        }
      ]
    }
  },
  created () {
    this.getDepLists()
  },
  methods: {
    // 1.获取部门数据
    async getDepLists () {
      // 请求前加载动画
      this.loading = true

      let res = await getDepartments()
      console.log(res)

      this.company.name = res.data.companyName

      // 发现每个数据都有pid属性，其中pid为空字符串的是一级架构
      // 遍历数组，先找出1级的节点
      let list = res.data.depts

      // 再调用递归函数得到树形数组赋值给data
      this.data = getDepData(list, '')

      // 请求后无动画
      // setTimeout(() => {
      this.loading = false
      // }, 1000)
    },
    doAdd (id) {
      this.currentId = id
      this.showDialog = true
    },
    // 编辑功能：
    async doEdit (id) {
      // 弹出框出来之前，请求单个部门信息：
      // 父组件调用子组件（methods里面的事件）：
      this.$refs.addDept.getDept(id)
      // 注意：每一行数据都有id
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: 20px;
  padding: 140px 120px;
}
</style>
